import React,{ useEffect, useState } from 'react';
import { Modal, Button, Tree } from 'antd';
import PermissionComponent from './PermissionComponent';
import { RoleListItem } from '../data.d';
import styles from '../index.less';

interface roleModelProps {
  modalVisible: boolean;
  onCancel: () => void;
  values: RoleListItem;
}

const RoleModel: React.FC<roleModelProps> = (props) => {
  const { modalVisible, onCancel, values } = props;
  return (
    <Modal 
      destroyOnClose 
      title="查看权限" 
      visible={modalVisible}
      onCancel={onCancel}
      footer={[
        <Button type="default" onClick={onCancel}>返回</Button>
      ]}
      centered
    >
      <div className={styles.treeContent}>
        <PermissionComponent
          edit={false}
          param={values.id}
          disabled={false} 
          checkedKeysList={values.permissionIds?values.permissionIds:[]} 
          selectChange={(value) => {
            console.log(value)
          }}>
        </PermissionComponent>
      </div>
    </Modal>
  );
};

export default RoleModel;
